<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车详情页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">

    <link rel="stylesheet" href="../elementui/index.css">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/videoDetail.css">
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

</head>

<body>
    <div id="app">
        <!-- 导航菜单 -->
        <nav>
            <div class="main">
                <img src="../img/login/qichezulin.png" alt="" class="logo">
                <ul>

                    <li class="check"><a href="../index.html">自驾租车</a></li>

                </ul>
                <div class="search">
                    <div class="left">车型<i class="iconfont icon-down"></i>
                    </div>
                    <input type="text" placeholder="搜索感兴趣的内容">
                    <img src="../img/public/search.png" alt="">
                </div>

                <div class="login" v-show="f1">
                    <a href="./loginAndRegister/login.html">登陆</a>
                    /
                    <a href="./loginAndRegister/register.html">注册</a>
                </div>

                <div class="user" v-show="f2">
                    <img src="../img/login/user.png" alt="">
                    <div class="userlist">
                        <ul>
                            <li>{{member.memberName}}</li>
                            <a :href="'./ordercenter.html?memberId='+member.memberId">
                                <li>订单中心</li>
                            </a>

                            <a href="./loginAndRegister/login.html">
                                <li class="out">退出登陆</li>
                            </a>
                        </ul>
                    </div>
                </div>

            </div>
        </nav>
        <div class="all">
            <div class="crumbs">
                <span>首页</span>
                <span>></span>
                <span>车辆列表</span>
                <span>></span>
                <span>车辆详情</span>
            </div>
        </div>
        <!-- 主体内容 -->
        <main>
            <div class="classDetail">
                <div class="left">
                    <img :src="OpenRendResponseVo.img" controls></img>
                </div>
                <div class="right">
                    <p class="title" style="font-weight: 700">{{OpenRendResponseVo.carName}}</p>
                    <ul>

                        <li>取车时间：{{startDate}}</li>
                        <li>还车时间：{{endDate}}</li>
                        <li>取车店铺：{{OpenRendResponseVo.shopName}}</li>
                        <li>还车店铺：{{OpenRendResponseVo.shopName}}</li>
                        <li>汽车品牌名称：{{OpenRendResponseVo.carBrandName}}</li>
                        <li>汽车类型：{{OpenRendResponseVo.type}}</li>
                        <li>汽车挡位：{{OpenRendResponseVo.gears}}</li>
                        <li>汽车座位：{{OpenRendResponseVo.site}}</li>
                        <li>汽车描述：{{OpenRendResponseVo.carDesc}}</li>
<!--                        <el-button style="width: 100px;height: 50px;position: relative;bottom: -56px;right: 95px;" type="primary" plain @click="setOrder">立即预定</el-button>-->
                    </ul>
                    <span style="font-size: 14px">汽车价格：</span><el-tag style="font-size: 25px;height: 40px;text-align: center">¥{{OpenRendResponseVo.dailyrent}}</el-tag>
                    <el-button type="primary"  @click="handleCreate()" style="position: relative;top:57px;right: 153px">提交订单</el-button>
                </div>
            </div>
        </main>
        <div class="add-form">
            <el-dialog title="身份验证" :visible.sync="dialogFormVisible">
                <template>
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="身份验证" name="first">
                            <el-form label-position="right" label-width="130px">
                                <el-row>

                                    <el-col :span="12">
                                        <el-form-item label="姓名">
                                            <el-input v-model="formData.memberName"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="身份证号">
                                            <el-input v-model="formData.idCard"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="setOrder()">确定</el-button>
                </div>
            </el-dialog>
        </div>

        <footer>
            <div class="cont">
                <div class="main">
                    <p>
                        首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 |
                        营业执照
                        | 教师资格证公示
                    </p>
                    <p>
                        京ICP备10218183号-1 京ICP证161188号 七易时代科技有限公司 | 地址：北京市大兴区 | 电话：010-66666666 | 京公网安备
                        01010102002533号
                    </p>
                    <p>
                        京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    </p>
                    <p>在线教育许可证：小优课堂经营许可证20188008号 | 互联网教育服务资格证书：(京)-经营性-2018-0011 |</p>
                </div>
            </div>
        </footer>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            activeName:'first',//添加/编辑窗口Tab标签名称
            OpenRendResponseVo:"",
            startDate:"",
            endDate:"",
            courseDetails:[],
            pagination:{
                orderId:"",
                createTime:"",
                endTime:"",
                carId:"",
                shopId:"",
                memberName:"",
                idCard:"",
                memberId:"",
            },
            dialogFormVisible: false,//控制添加窗口显示/隐藏
            formData: {
            },//表单数据
            member:"",
            f1:true,
            f2:false,

        },
        methods: {
            findByCid(){
                //获取路径
                var url = location.href;
                //截取cid
                var id = url.substring(url.lastIndexOf("id")+3,url.lastIndexOf("id")+4);
                // console.log(id);
                var start = url.substring(url.indexOf("startDate")+10,url.indexOf("startDate")+31)
                var end = url.substring(url.indexOf("endDate")+8)
                var startTime = url.substring(url.indexOf("startTime")+10,url.indexOf("startTime")+12)
                var endTime = url.substring(url.indexOf("endTime")+8)
                var startFront = start.substring(0,10);
                var endFront = end.substring(0,10);
                var startDate = startFront+" "+startTime+":00:00"
                var endDate = endFront+" "+endTime+":00:00"


                this.startDate=startDate;
                this.endDate=endDate;
                console.log(startFront)
                console.log(endDate)
                console.log(id)
                console.log(startTime)
                console.log(endTime)
                //请求服务器查询
                axios.post("/carOrder/selectOpenRentdById?id="+id).then(resp=>{
                    console.log(resp);
                    this.OpenRendResponseVo=resp.data.data;
                    // if (resp.data.data.dlist.length!=0) {
                    //     this.start_data=resp.data.data.dlist[0].start_data;
                    //
                    // }else{
                    //     this.start_data="";
                    // }
                })
            },
            //弹出添加窗口
            handleCreate() {
                if(this.f2){
                    this.dialogFormVisible=true;
                }else {
                    alert("请登录");
                    window.location.href="./loginAndRegister/login.html"
                }
                this.activeName='first';
                this.resetForm();

            },
            // 重置表单
            resetForm() {
                this.formData={};
            },
            setOrder: function () {
                if (this.f2) {


                    var  now = new Date();
                    var day = now.getDate();
                    if (day<=9){
                        day="0"+day;
                    }
                    var  hours = now.getHours();
                    if (hours<=9){
                        hours="0"+hours;
                    }
                    var minutes = now.getMinutes();
                    if (minutes<=9){
                        minutes="0"+minutes;
                    }
                    var seconds = now.getSeconds();
                    if (seconds<=9){
                        seconds="0"+seconds;
                    }
                    var orderId = ""+day+hours+minutes+seconds;
                    console.log(orderId)
                    this.pagination.orderId=orderId;
                    this.pagination.createTime = this.startDate;
                    this.pagination.endTime = this.endDate;
                    this.pagination.carId = this.OpenRendResponseVo.carId;
                    this.pagination.shopId = this.OpenRendResponseVo.shopId;
                    this.pagination.memberName = this.formData.memberName;
                    this.pagination.idCard = this.formData.idCard;
                    this.pagination.memberId = this.member.memberId;
                    this.pagination.payAmount = this.OpenRendResponseVo.dailyrent;

                    axios.post("/carOrder/setOrder", this.pagination).then(res => {
                        if (res.data.flag) {
                            const h = this.$createElement;
                            this.$notify({
                                title: '订单',
                                message: h('i', {style: 'color: teal'}, res.data.message)
                            });
                            setTimeout(() => {
                                var price = this.OpenRendResponseVo.dailyrent + this.OpenRendResponseVo.dailyrent;
                                location.href = "./pay.html?orderId=" + orderId + "&title=qichezulin" + "&price=" + price;
                            }, 1000);

                        } else {
                            const h = this.$createElement;
                            this.$notify({
                                title: '订单',
                                message: h('i', {style: 'color: teal'}, res.data.message)
                            });
                        }
                    })
                } else {
                    alert("请登录");
                    window.location.href = "./loginAndRegister/login.html";
                }

            },
            initParams(){
                var str = window.sessionStorage.getItem("login");
                console.log(str);
                if(str!=null && str!=""){
                    this.member = JSON.parse(str);
                    this.f2=true;
                    this.f1=false;
                }else{
                    this.f1=true;
                    this.f2=false;
                }
            },

        },
        created() {
            this.findByCid();

        },
        mounted() {
            this.initParams();
        }


    })
</script>

</html>